<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    .menu {
      width: 100px;
      background-color: rgba(0, 0, 0, 0.1);
      margin: 10px;
    }

    .menu-item {
      position: relative;
      padding: 5px;
      cursor: pointer;
    }

    .menu-content {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
      width: 200px;
      height: 100px;
      padding: 0 5px;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .menu:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }

    .menu-item:hover .menu-content {
      display: block;
    }

    .menu-loading {
      width: 100px;
      /* margin: 45px 0 0 92px; */
      margin-left: 46px;
    }
    .loading-page{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      background-color: #eee;
      text-align: center;
    }
    .loading-img{
      position: absolute;
      top: 50%;
    }
    .ad img{
      display:inline-block;
      width: 25%;
    }
    .none{
      display: none;
    }
  </style>
</head>
<body>
  <div id="loading-page" class="loading-page">
    <img src="./loading.gif" alt="加载中" class="loading-img">
  </div>
  <div id="ad" class="ad"></div>
  <ul class="menu" id="menu">
    <!-- <li class="menu-item" data-key="hot" data-done="done">
      <span>热门</span>
      <div class="menu-content">
        <p>
          <img src="./loading.gif" alt="加载中" class="menu-loading" />
        </p>
      </div>
    </li> -->
  </ul>

  <script type="module">
    import {getJSON} from './index.js'
    const url = 'https://www.imooc.com/api/mall-PC/index/menu/';
    const adurl = 'https://www.imooc.com/api/mall-PC/index/ad/';
    const page=document.getElementById('loading-page')
    const ad=document.getElementById('ad')
    const menu=document.getElementById('menu')
    const p1=getJSON(url).then(response => {
      // console.log(response);
      let html = "";
      for (const item of response.data) {
        html += `
        <li class="menu-item" data-key="${item.key}">
          <span>${item.title}</span>
          <div class="menu-content">
            <p>
              <img src="./loading.gif" alt="加载中" class="menu-loading"/>
            </p>
          </div>
        </li>
        `
      }
      menu.innerHTML = html
    }).then(()=>{
      const items=menu.querySelectorAll('.menu-item')
      for(const item of items){
        item.onmouseenter=function(){
          if(item.dataset.done==='done'){
            return;
          }
          getJSON( `${url}${item.dataset.key}`).then(response=>{
            item.dataset.done='done';
            let html='';
            for(const item of response.data){
              html+=`<p>${item.title}<p>`
            }
            item.querySelector('.menu-content').innerHTML=html
          })
        }
      }
    }).catch(err => {
      console.log(err);
    })
    const p2=getJSON(adurl).then(response=>{
      console.log(response);
      let html='';
      for(const item of response.data){
        html+=`<img src="${item.url}"/>`
      }
      ad.innerHTML=html
    }).catch(err=>{
      console.log(err);
    })
    Promise.all([p1,p2]).then(()=>{
      page.classList.add('none')
    })
  </script>
</body>
</html>